<template>
    <div class="container">
        <div class="title-style">订单信息</div>
        <Row class="inner-box">
            <h1>已完成</h1>
            <br>
            <Row class="order-content" type="flex" justify="space-between" :gutter="20">
                <Col span="12">
                    <span class="form-label">订单编号：</span>
                    <span class="form-content">{{orderInfo.orderNum}}</span>
                </Col>
                <Col span="12">
                    <span class="form-label">销售日期：</span>
                    <span class="form-content">{{orderInfo.saleDate}}</span>
                </Col>
            </Row>
            <Row class="order-content" type="flex" justify="space-between" :gutter="20">
                <Col span="12">
                    <span class="form-label">会员名称：</span>
                    <span class="form-content">{{orderInfo.memberName}}</span>
                </Col>
                <Col span="12">
                    <span class="form-label">会员电话：</span>
                    <span class="form-content">{{orderInfo.memberTel}}</span>
                </Col>
            </Row>
            <Row class="order-content" type="flex" justify="space-between" :gutter="20">
                <Col span="12">
                    <span class="form-label">订单金额：</span>
                    <span class="form-content">{{orderInfo.orderAmount}}</span>
                </Col>
            </Row>
        </Row>
        <div class="title-style">支付信息</div>
        <Row class="inner-box">
            <Table :loading="payTable.loading" :columns="payTable.columns" :data="payTable.data"></Table>
        </Row>
        <div class="title-style">消费信息</div>
        <Row class="inner-box">
            <vxe-toolbar export custom></vxe-toolbar>
            <vxe-table
                    border="none "
                    show-overflow
                    resizable
                    :tooltip-config="{theme:'light',enterable:true}"
                    highlight-hover-row
                    size="medium"
                    align="center"
                    header-align="center"
                    :loading="disburseTable.loading"
                    :sort-config="{trigger: 'cell'}"
                    :data="disburseTable.data">
                <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
                <vxe-table-column :field="item.key" :title="item.title" min-width="120"
                                  v-for="(item,index) in disburseTable.columns" :key="index">
                </vxe-table-column>
            </vxe-table>
            <br>
            <Card dis-hover>
                <Row type="flex" justify="end">
                    <Col span="6">
                        <Row>
                            <span class="form-label settlement">合计：</span>
                            <span class="settlement-tag"></span>
                            <span class="form-content">{{settlement.total}}</span>
                        </Row>
                        <Row>
                            <span class="form-label settlement">优惠合计：</span>
                            <span class="settlement-tag"> - </span>
                            <span class="form-content">{{settlement.discount_total}}</span>
                        </Row>
                        <Row>
                            <span class="form-label settlement">实际付款：</span>
                            <span class="settlement-tag"></span>
                            <span class="form-content">{{settlement.actual_pay}}</span>
                        </Row>
                    </Col>
                </Row>
            </Card>
        </Row>
    </div>
</template>

<script>
import { } from '@/api/shop'

export default {
  data () {
    return {
      orderInfo: {
        orderNum: '1000000000000000',
        saleDate: '2020-04-17',
        memberName: '某某某',
        memberTel: '18888888888',
        orderAmount: '1000.00 元'
      },
      payTable: {
        loading: false,
        columns: [
          {
            type: 'index',
            width: 70,
            title: '序号',
            align: 'center'
          },
          {
            title: '支付流水号',
            key: 'pay_record_num',
            width: 180,
            align: 'center'
          },
          {
            title: '支付方式名称',
            key: 'pay_type_name',
            width: 180,
            align: 'center'
          },
          {
            title: '待支付金额',
            key: 'be_paid_money',
            width: 180,
            align: 'center'
          },
          {
            title: '创建时间',
            key: 'create_time',
            width: 180,
            align: 'center'
          },
          {
            title: '支付状态',
            key: 'pay_state',
            minWidth: 180,
            align: 'center'
          }
        ],
        data: [
          {
            pay_record_num: 12345678934567856,
            pay_type_name: '现金',
            be_paid_money: '¥2元',
            create_time: '2020-06-01 11:12:39',
            pay_state: '已支付'
          }
        ]
      },
      disburseTable: {
        loading: false,
        columns: [
          {
            title: '商品名称（规格）',
            key: 'goods_name',
            width: 180,
            align: 'center'
          },
          {
            title: '单价',
            key: 'unit_price',
            width: 180,
            align: 'center'
          },
          {
            title: '数量',
            key: 'number',
            width: 180,
            align: 'center'
          },
          {
            title: '优惠类型',
            key: 'discount_type',
            width: 180,
            align: 'center'
          },
          {
            title: '优惠',
            key: 'discount',
            minWidth: 180,
            align: 'center'
          },
          {
            title: '备注',
            key: 'remarks',
            minWidth: 180,
            align: 'center'
          },
          {
            title: '小计',
            key: 'total',
            minWidth: 180,
            align: 'center'
          }
        ],
        data: [
          {
            goods_name: '得力7091固体胶（只）',
            unit_price: '¥2元',
            number: '1',
            discount_type: '-',
            discount: '-',
            remarks: '-',
            total: '¥2元'
          }
        ]
      },
      settlement: {
        total: '¥2元',
        discount_total: '¥0元',
        actual_pay: '¥2元'
      }
    }
  },
  methods: {
  },
  mounted () {
  }
}
</script>

<style scoped>
    .container {
        margin-bottom: 50px;
    }

    .title-style {
        padding: 8px 12px;
        background-color: #ecf8ff;
        border-radius: 4px;
        border-left: 5px solid #50bfff;
        margin: 15px 0;
        font-size: 16px;
        width: 100%;
    }

    .inner-box {
        padding: 20px;
    }

    .order-content {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .form-label {
        margin-right: 5px;
        font-weight: 500;
    }

    .settlement-tag {
        display: inline-block;
        width: 10px;
    }

    .settlement {
        display: inline-block;
        margin-right: 10px;
        width: 100px;
    }
</style>
